<template>
  <div class="sppz">
    <Card>
      <el-checkbox-group v-model="checkedOptions" :max="1">
        <el-checkbox label="云视讯专线一"> 云视讯专线一 </el-checkbox>
        <el-checkbox label="云视讯专线二"> 云视讯专线二 </el-checkbox>
        <el-checkbox label="云视讯专线三"> 云视讯专线三 </el-checkbox>
      </el-checkbox-group>
      <Card title="流程配置" style="margin-top: 20px">
        <div slot="cRight">
          <el-button type="primary" size="small" @click="dialogVisible = true">
            添加审批人
          </el-button>
          <el-button type="primary" size="small" @click="dialogVisibleA = true">
            删除审批人
          </el-button>
        </div>
        <el-row style="margin-bottom: 40px">
          <el-col :span="2">
            <el-checkbox-group
              v-model="checkedOptionsB"
              :max="1"
              style="margin-top: 8px"
            >
              <el-checkbox label="业务开通"> 业务开通 </el-checkbox>
            </el-checkbox-group>
          </el-col>
          <el-col :span="22">
            <el-steps :active="stepLists.length">
              <el-step
                v-for="(item, index) in stepLists"
                :key="index"
                :title="item.label"
              ></el-step>
            </el-steps>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 40px">
          <el-col :span="2">
            <el-checkbox-group
              v-model="checkedOptionsB"
              :max="1"
              style="margin-top: 8px"
            >
              <el-checkbox label="业务变更"> 业务变更 </el-checkbox>
            </el-checkbox-group>
          </el-col>
          <el-col :span="22">
            <el-steps :active="stepListsA.length">
              <el-step
                v-for="(item, index) in stepListsA"
                :key="index"
                :title="item.label"
              ></el-step>
            </el-steps>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 40px">
          <el-col :span="2">
            <el-checkbox-group
              v-model="checkedOptionsB"
              :max="1"
              style="margin-top: 8px"
            >
              <el-checkbox label="业务注销"> 业务注销 </el-checkbox>
            </el-checkbox-group>
          </el-col>
          <el-col :span="22">
            <el-steps :active="stepListsB.length">
              <el-step
                v-for="(item, index) in stepListsB"
                :key="index"
                :title="item.label"
              ></el-step>
            </el-steps>
          </el-col>
        </el-row>
      </Card>
    </Card>

    <el-dialog title="添加审批角色" :visible.sync="dialogVisible" width="30%">
      <el-form inline label-width="100px">
        <el-form-item label="添加审批角色">
          <el-input v-model="addPer"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddPer">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="删除审批人" :visible.sync="dialogVisibleA" width="30%">
      <el-table
        :data="relAddPerLists"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="label" label="审批人"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleA = false">取 消</el-button>
        <el-button type="primary" @click="handleDelPer">删 除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Card from '@/components/Card'
export default {
  components: {
    Card
  },

  data() {
    return {
      dialogVisible: false,
      dialogVisibleA: false,
      addPer: '',
      addPerLists: [],
      addPerListsA: [],
      addPerListsB: [],
      multipleSelection: [],
      checkedOptions: [],
      checkedOptionsA: [],
      checkedOptionsB: []
    }
  },

  computed: {
    stepLists() {
      let stepLists = [{ label: '开始' }, { label: '结束' }]
      stepLists.splice(1, 0, ...this.addPerLists)
      return stepLists
    },
    stepListsA() {
      let stepLists = [{ label: '开始' }, { label: '结束' }]
      stepLists.splice(1, 0, ...this.addPerListsA)
      return stepLists
    },
    stepListsB() {
      let stepLists = [{ label: '开始' }, { label: '结束' }]
      stepLists.splice(1, 0, ...this.addPerListsB)
      return stepLists
    },
    relAddPerLists() {
      let list = []
      if (this.checkedOptionsB[0] === '业务开通') {
        list = this.addPerLists
      } else if (this.checkedOptionsB[0] === '业务变更') {
        list = this.addPerListsA
      } else if (this.checkedOptionsB[0] === '业务注销') {
        list = this.addPerListsB
      }
      return list
    }
  },

  methods: {
    handleAddPer() {
      if (this.checkedOptionsB[0] === '业务开通') {
        this.addPerLists.push({ label: this.addPer })
        this.dialogVisible = false
      } else if (this.checkedOptionsB[0] === '业务变更') {
        this.addPerListsA.push({ label: this.addPer })
        this.dialogVisible = false
      } else if (this.checkedOptionsB[0] === '业务注销') {
        this.addPerListsB.push({ label: this.addPer })
        this.dialogVisible = false
      }
      this.addPer = ''
      this.checkedOptionsB = []
    },
    handleDelPer() {
      if (this.checkedOptionsB[0] === '业务开通') {
        this.multipleSelection.forEach(item => {
          this.addPerLists.forEach((itemA, index) => {
            if (item.label === itemA.label) {
              this.addPerLists.splice(index, 1)
            }
          })
        })
      } else if (this.checkedOptionsB[0] === '业务变更') {
        this.multipleSelection.forEach(item => {
          this.addPerListsA.forEach((itemA, index) => {
            if (item.label === itemA.label) {
              this.addPerLists.splice(index, 1)
            }
          })
        })
      } else if (this.checkedOptionsB[0] === '业务注销') {
        this.multipleSelection.forEach(item => {
          this.addPerListsB.forEach((itemA, index) => {
            if (item.label === itemA.label) {
              this.addPerLists.splice(index, 1)
            }
          })
        })
      }
      this.checkedOptionsB = []
      this.dialogVisibleA = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="scss" scoped></style>
